import Link from 'next/link';
import type { Metadata } from 'next';
import { getPrivacyPolicies } from '@/api/pd-privacy';
import { Wrapper } from '@/components/wrapper';

export const metadata: Metadata = {
    title: '产品隐私政策',
    description: '查看我们产品的隐私政策'
};

export default async function PrivacyPoliciesPage() {
    const policies = await getPrivacyPolicies();

    return (
        <div className="min-h-screen">
            <Wrapper className="px-6 pb-24 pt-8">
                <div className="mx-auto">
                    <h1 className="text-3xl md:text-4xl font-bold mb-8">产品隐私政策</h1>
                    <p className="text-muted-foreground mb-12">
                        查看我的各个产品的隐私政策详情
                    </p>

                    <div className="grid gap-6 md:grid-cols-3">
                        {policies.map((policy) => (
                            <Link
                                key={policy.slug}
                                href={`/pd-privacy/${policy.slug}`}
                                className="group block p-6 rounded-lg border border-border hover:border-primary transition-colors"
                            >
                                <h2 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
                                    {policy.name}
                                </h2>
                                {policy.description && (
                                    <p className="text-muted-foreground text-sm mb-3">
                                        {policy.description}
                                    </p>
                                )}
                                {policy.updatedAt && (
                                    <p className="text-xs text-muted-foreground">
                                        更新时间：{policy.updatedAt}
                                    </p>
                                )}
                                <div className="mt-4 flex items-center text-sm text-primary">
                                    查看详情
                                    <svg
                                        className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M9 5l7 7-7 7"
                                        />
                                    </svg>
                                </div>
                            </Link>
                        ))}
                    </div>

                    {policies.length === 0 && (
                        <div className="text-center py-12 text-muted-foreground">
                            暂无产品隐私政策
                        </div>
                    )}
                </div>
            </Wrapper>
        </div>
    );
}
